<template>
    <div id="profitToday">
        <component-title :title-text="'今日盈亏'"></component-title>
        <div class="description">
            当日盈亏=今日总资产-今日转入资金+今日转出资金
        </div>
        <div class="totalAsset">
            <header>
                <div class="title">今日总资产</div>
                <div class="num" v-text="totalAsset.asset_today"></div>
            </header>
            <main>
                <div>
                    <div class="header">股票</div>
                    <div class="header">理财</div>
                    <div class="header">现金</div>
                </div>
                <div>
                    <div class="content" v-text="totalAsset.asset_stock"></div>
                    <div class="content" v-text="totalAsset.asset_financing"></div>
                    <div class="content" v-text="totalAsset.asset_cash"></div>
                </div>
            </main>
            <footer>
                <div class="title">上一交易日总资产</div>
                <div class="num" v-text="totalAsset.asset_yesterday"></div>
            </footer>
        </div>
        <div class="inputAsset">
            <header>
                <div class="title">今日转入资金</div>
                <a href="" class="more">更多</a>
            </header>
            <main>
                <div>
                    <div class="header">时间</div>
                    <div class="header">银行</div>
                    <div class="header">金额</div>
                    <div class="header">交易状态</div>
                </div>
                <div v-for="item in assetRecord.inputAsset">
                    <div class="content" v-text="timeFormatter(item.entrust_time)"></div>
                    <div class="content" v-text="item.bank_name"></div>
                    <div class="content" v-text="parseFloat(item.occur_balance).toFixed(2)"></div>
                    <div class="content" v-text="item.bktrans_status=='2'?'成功':'失败'" :class="{fontGray:item.bktrans_status=='2'?false:true}"></div>
                </div>
            </main>
        </div>
        <div class="outputAsset">
            <header>
                <div class="title">今日转出资金</div>
                <a href="" class="more">更多</a>
            </header>
            <main>
                <div>
                    <div class="header">时间</div>
                    <div class="header">银行</div>
                    <div class="header">金额</div>
                    <div class="header">交易状态</div>
                </div>
                <div v-for="item in assetRecord.outputAsset">
                    <div class="content" v-text="timeFormatter(item.entrust_time)"></div>
                    <div class="content" v-text="item.bank_name"></div>
                    <div class="content" v-text="parseFloat(item.occur_balance).toFixed(2)"></div>
                    <div class="content" v-text="status(item)[item.bktrans_status]" :class="{fontGray:item.bktrans_status=='3'?true:false}"></div>
                </div>
            </main>
        </div>
    </div>
</template>
<script>
    import Title from '@/components/Title'

    export default{
        props:{
            totalAsset:{
                type:Object
            },
            assetRecord:{
                type:Object
            }
        },
        mounted(){
            // console.log(assetRecord)
        },
        methods:{
            timeFormatter(mmddhhmm){
                return mmddhhmm.slice(0,2)
                      +':'
                      +mmddhhmm.slice(2,4)
            },
            status(record){
                if(record.payorgan_id == ''){
                    return {
                        '0':'未报',
                        '1':'已报',
                        '2':'成功',
                        '3':'失败',
                        '4':'超时',
                        '5':'待冲正',
                        '6':'已冲正',
                        '7':'调整为成功',
                        '8':'调整为失败'
                    }
                }
                else{
                    return {
                        '0':'未报',
                        '1':'已报',
                        '2':'成功',
                        '3':'作废',
                        '4':'待撤',
                        '5':'撤销',
                        '7':'待冲正',
                        '8':'已冲正',
                        'A':'待报',
                        'P':'正报',
                        'Q':'已确认'
                    }
                }
            }
        },
        components:{
            componentTitle:Title
        }
    }
</script>
<style scoped>
    #profitToday{
        margin-top:15px;
        background:#fff;
        padding:40px 30px;
    }
    .description{
        padding: 40px 0;
        font-size: 24px;
        color: #555;
        text-align: center;
    }
    .totalAsset header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .totalAsset header .title{
        font-size: 28px;
        color: #555;
    }
    .totalAsset header .num{
        font-size: 28px;
        color: #ff8420;
    }
    .totalAsset main{
        margin-top: 10px;
        background: #fffaf2;
    }
    .totalAsset main>div{
        padding: 10px 0;
        display: flex;
    }
    .totalAsset main>div:last-child{
        padding-bottom: 20px;
    }
    .totalAsset main>div .header{
        margin-top: 0;
        width: 1px;
        flex-grow: 1;
        text-align: center;
        font-size: 24px;
        color: #999;
    }
    .totalAsset main>div .content{
        margin-top: 0;
        width: 1px;
        flex-grow: 1;
        padding: 10px 0;
        text-align: center;
        font-size: 24px;
        color: #222;
    }
    .totalAsset footer{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .totalAsset footer .title{
        font-size: 28px;
        color: #555;
    }
    .totalAsset footer .num{
        font-size: 28px;
        color: #ff8420;
    }

    .inputAsset,.outputAsset{
        margin-top: 30px;
    }
    .inputAsset header,.outputAsset header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inputAsset header .title,.outputAsset header .title{
        font-size: 28px;
        color: #555;
    }
    .inputAsset header .more,.outputAsset header .more{
        font-size: 24px;
        color: #309fea;
    }
    .inputAsset main,.outputAsset main{
        margin-top: 10px;
        background: #fffaf2;
    }
    .inputAsset main>div,.outputAsset main>div{
        padding: 10px 0;
        display: flex;
    }
    .inputAsset main>div:last-child,.outputAsset main>div:last-child{
        padding-bottom: 20px;
    }
    .inputAsset main>div .header,.outputAsset main>div .header{
        margin-top: 0;
        width: 1px;
        flex-grow: 1;
        text-align: center;
        font-size: 24px;
        color: #999;
    }
    .inputAsset main>div .content,.outputAsset main>div .content{
        margin-top: 0;
        width: 1px;
        flex-grow: 1;
        text-align: center;
        font-size: 24px;
        color: #222;
    }
    .fontGray{
        color: #999 !important;
    }
</style>